/**
* ClassName: My
* Package: src/views
* Description: "我的"界面
*
* @Author Liu Wenrui
* @Create 2025/9/24 16:00
* @Version 1.0
*/

<template>
    <div class="my-page">
        <div class="profile">
            <img :src="userImg" class="avatar" alt="头像">
            <div class="info">
                <div class="username">{{ user.username || '未登录' }}</div>
                <div class="vip" v-if="isVip">超级会员</div>
            </div>
        </div>
        <ul class="menu-list">
            <li @click="toOrderList">
                <i class="fa fa-file-text-o"></i>
                <span>我的订单</span>
                <i class="fa fa-angle-right right"></i>
            </li>
            <li @click="toAddress">
                <i class="fa fa-map-marker"></i>
                <span>地址管理</span>
                <i class="fa fa-angle-right right"></i>
            </li>
            <ul class="menu-list">
                <!-- ...原有菜单项... -->
                <li @click="showFavorites = true">
                    <i class="fa fa-heart"></i>
                    <span>收藏店铺</span>
                    <i class="fa fa-angle-right right"></i>
                </li>
                <!-- ...原有菜单项... -->
            </ul>
            <li v-if="isAdmin" @click="toAuditBusiness">
                <i class="fa fa-check-square-o"></i>
                <span>审核店铺</span>
                <i class="fa fa-angle-right right"></i>
            </li>
            <li @click="toPassword">
                <i class="fa fa-lock"></i>
                <span>修改密码</span>
                <i class="fa fa-angle-right right"></i>
            </li>
            <li @click="logout">
                <i class="fa fa-sign-out"></i>
                <span>退出登录</span>
                <i class="fa fa-angle-right right"></i>
            </li>
        </ul>

        <div v-if="showAudit" class="audit-modal">
            <div class="audit-content">
                <h3>待审核店铺</h3>
                <ul>
                    <li v-for="b in businesses" :key="b.id">
                        <span>{{ b.businessName }}</span>
                        <button @click="approve(b.id)">通过</button>
                        <button @click="reject(b.id)">拒绝</button>
                    </li>
                </ul>
                <button class="close-btn" @click="showAudit = false">关闭</button>
            </div>
        </div>

        <div v-if="showFavorites" class="audit-modal">
            <div class="audit-content">
                <h3>我的收藏店铺</h3>
                <ul>
                    <li v-for="f in favorites" :key="f.id">
                        <span class="favorite-link" @click="toBusinessInfo(f.businessId)"
                            style="cursor:pointer;color:#0097FF;text-decoration:underline;">
                            {{ f.businessName }}
                        </span>
                        <button @click="unfavorite(f.id)">取消收藏</button>
                    </li>
                </ul>
                <button class="close-btn" @click="showFavorites = false">关闭</button>
            </div>
        </div>

        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>


<script>
// 随机头像
import Footer from '../components/Footer.vue';
function getRandomAvatar() {
    const avatars = [
        require('../assets/default.png'),
        require('../assets/yhtx01.png'),
        require('../assets/yhtx02.png'),
        require('../assets/yhtx03.png'),
        require('../assets/yhtx04.png'),
        require('../assets/yhtx05.png'),
        require('../assets/yhtx06.png'),
        require('../assets/yhtx07.png'),
        require('../assets/yhtx08.png'),
        require('../assets/yhtx09.png'),
        require('../assets/yhtx10.png')

    ];
    // 随机选一个
    return avatars[Math.floor(Math.random() * avatars.length)];
}
export default {
    name: "My",
    data() {
        return {
            user: {},
            userImg: getRandomAvatar(),
            isVip: false, // 可根据业务判断是否会员
            isAdmin: false,
            showAudit: false,
            businesses: [],
            showFavorites: false,
            favorites: [] // 收藏的店铺列表
        }
    },
    created() {
        // 获取当前用户信息
        this.$axios.get('/user').then(res => {
            this.user = res.data;
            // 判断是否管理员
            this.isAdmin = (this.user.authorities || []).some(a => a.name === 'ADMIN');
        });
    },
    methods: {
        toOrderList() {
            this.$router.push({ path: '/orderList' });
        },
        toAddress() {
            this.$router.push({ path: '/userAddress' });
        },
        toPassword() {
            this.$router.push({ path: '/password' });
        },
        logout() {
            window.sessionStorage.clear();
            this.$router.push({ path: '/login' });
        },
        toAuditBusiness() {
            this.$axios.get('/businesses/public').then(res => {
                this.businesses = (res.data.data || []).filter(b => !b.remarks);
                this.showAudit = true;
            });
        },

        toBusinessInfo(businessId) {
            this.$router.push({ path: '/businessInfo', query: { businessId } });
        },
        approve(id) {
            this.$axios.patch(`/businesses/${id}`, {
                remarks: '审核通过'
            }).then(res => {
                const ownerid = res.data.data.businessOwnerId;
                if (ownerid) {
                    this.$axios.patch(`/user`, {
                        id: ownerid,
                        authorities: [
                            { name: "BUSINESS" },
                            { name: "USER" }
                        ]
                    });
                }
                this.businesses = this.businesses.filter(b => b.id !== id);
            });
        },
        reject(id) {
            this.$axios.patch(`/businesses/${id}`, {
                remarks: '审核拒绝'
            }).then(() => {
                this.businesses = this.businesses.filter(b => b.id !== id);
            });
        },
        showFavoritesList() {
            this.$axios.get('/star').then(res => {
                let stars = res.data.data || [];
                const uniqueStars = [];
                const seen = new Set();
                for (const star of stars) {
                    if (!seen.has(star.businessId)) {
                        seen.add(star.businessId);
                        uniqueStars.push(star);
                    }
                }
                const requests = uniqueStars.map(star =>
                    this.$axios.get(`/businesses/public/${star.businessId}`)
                        .then(bizRes => ({
                            ...star,
                            businessName: bizRes.data.data.businessName
                        }))
                );
                Promise.all(requests).then(favorites => {
                    this.favorites = favorites;
                    this.showFavorites = true;
                });
            });
        },
        unfavorite(id) {
            this.$axios.delete(`/star/${id}`).then(() => {
                this.favorites = this.favorites.filter(f => f.id !== id);
            });
        }
    },
    watch: {
        showFavorites(val) {
            if (val) this.showFavoritesList();
        }
    },
    components: {
        Footer
    }
}
</script>

<style scoped>
.my-page {
    background: #f5f5f5;
    min-height: 100vh;
}

.profile {
    display: flex;
    align-items: center;
    padding: 32px 24px 16px 24px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-right: 18px;
    object-fit: cover;
    background: #eee;
}

.info {
    flex: 1;
    text-align: left;
}

.username {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
}

.vip {
    color: #ffb800;
    font-size: 16px;
}

.menu-list {
    margin: 24px 0 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
}

.menu-list li {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #eee;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
}

.menu-list li:hover {
    background: #f0f8ff;
}

.menu-list i {
    font-size: 22px;
    margin-right: 18px;
    color: #0097FF;
}

.menu-list .right {
    margin-left: auto;
    color: #bbb;
}

.audit-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.audit-content {
    background: #fff;
    padding: 32px 28px 24px 28px;
    border-radius: 16px;
    min-width: 340px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 让内容居中 */
}

.audit-content h3 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 18px;
    color: #333;
}

.audit-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
}

.audit-content li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: 17px;
}

.audit-content li:last-child {
    border-bottom: none;
}

.audit-content button {
    background: #0097FF;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s;
}

.audit-content button:hover {
    background: #0077cc;
}

.audit-content .close-btn {
    background: #eee;
    margin: 18px auto 0 auto;
    color: #333;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 15px;
    width: fit-content;
}

.audit-content ul {
    width: 100%;
    padding: 0;
    margin: 0 0 18px 0;
}

.audit-content li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: 17px;
}

.audit-content li:last-child {
    border-bottom: none;
}

.audit-content li span {
    flex: 1;
    font-weight: 500;
    color: #333;
    margin-right: 16px;
}

.audit-content li button {
    background: #0097FF;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s;
}

.audit-content li button:hover {
    background: #0077cc;
}
</style>